<template>
	<view class="topup-entry">
		<g-navbar title="直营充值" backgroundColor="none" fontColor="#ffffff" />
		<view class="topup-entry-container">
			<view class="entry-label">
				购机余额(元)
			</view>
			<view class="balance-value">
				￥{{userInfo?userInfo.machine_balance:'0.00'}}
			</view>
			<view class="topup-btn" @click="jump">
				立即充值
			</view>
		</view>
		<view class="topup-history-list-container">
			<custom-tabs type="c1" :value="current" @change="onChange" :tabSpacing="48">
				<custom-tab-pane style="width:100%" :label="item.label" name="c1_2"
					v-for="item,index in topupHistoryOptionsGroup" :key="index">
					<scroll-view scroll-y class="topup-history-list" @scrolltolower="scrolltolower">
						<topupHistoryItem v-for="subitem in item.list" :key="subitem.id" :detail="subitem" />
						<uni-load-more :status="item.loadingStatus"></uni-load-more>
					</scroll-view>
				</custom-tab-pane>
			</custom-tabs>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, Ref, ref } from "vue";
	import topupHistoryItem from './components/topup-history-item/topupHistoryItem'
	import { ITopupHistoryItem } from './components/topup-history-item/types';
	import { ITopupHistoryOptions, IGetTopupHistoryListOptions, IGetTopupHistoryListResult, ITabsChangeEvent } from './types';
	import { TOPUP_CHECK_STATUS } from '@/enum/topup';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { useStore } from 'vuex';
	import REST_URL from "@/http/http.restUrl";
	import { onLoad } from '@dcloudio/uni-app';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	const current : Ref<number> = ref(0);

	const store = useStore();

	uni.$on('updateHistoryList', () => {
		updateHistoryList();
		uni.$off('updateHistoryList');
	});

	const topupHistoryOptionsGroup : ITopupHistoryOptions[] = reactive([
		{
			label: '全部',
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 5,
			pageNum: 1,
			list: [],
		},
		{
			checkStatus: TOPUP_CHECK_STATUS.PENDING,
			label: '待审核',
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 5,
			pageNum: 1,
			list: [],
		},
		{
			checkStatus: TOPUP_CHECK_STATUS.SUCCESS,
			label: '审核成功',
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 5,
			pageNum: 1,
			list: [],
		},
		{
			checkStatus: TOPUP_CHECK_STATUS.FAIL,
			label: '审核失败',
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 5,
			pageNum: 1,
			list: [],
		},
	]);

	const getTopupHistoryList = async () : Promise<void> => {
		const currentIndex = current.value;
		console.log(topupHistoryOptionsGroup[currentIndex].loadingStatus)
		if (topupHistoryOptionsGroup[currentIndex].loadingStatus !== LOADING_STATUS.MORE) return
		const options : IGetTopupHistoryListOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: topupHistoryOptionsGroup[currentIndex].pageNum,
			page_num: topupHistoryOptionsGroup[currentIndex].pageSize,
		}
		if (topupHistoryOptionsGroup[currentIndex].checkStatus) options.status = topupHistoryOptionsGroup[currentIndex].checkStatus;

		topupHistoryOptionsGroup[currentIndex].loadingStatus = LOADING_STATUS.LOADING;

		try {
			const { data, total } : IGetTopupHistoryListResult = (await uni.http.POST(REST_URL.getTopupHistoryList, options)).data;
			topupHistoryOptionsGroup[currentIndex].list.push(...data);
			topupHistoryOptionsGroup[currentIndex].pageNum++;
			topupHistoryOptionsGroup[currentIndex].loadingStatus = topupHistoryOptionsGroup[currentIndex].list.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
		} catch (e) {
			topupHistoryOptionsGroup[currentIndex].loadingStatus = LOADING_STATUS.NOMORE;
		}
	}

	const onChange = (e : ITabsChangeEvent) : void => {
		current.value = e.value;
		if (!topupHistoryOptionsGroup[e.value].list.length) {
			getTopupHistoryList();
		}

	}

	const scrolltolower = () => {
		getTopupHistoryList();
	}

	const updateHistoryList = (() => {
		current.value = 0;

		topupHistoryOptionsGroup.map((item : ITopupHistoryOptions, index : number) => {
			topupHistoryOptionsGroup[index].list = [];
			topupHistoryOptionsGroup[index].loadingStatus = LOADING_STATUS.MORE;
			topupHistoryOptionsGroup[index].pageNum = 1;
			return item
		})

		getTopupHistoryList();
	})

	onLoad(async () => {
		await uni.loginManger.$interceptor;
		await getTopupHistoryList();
	})

	const jump = () => {
		uni.router.route('/pages_topup/topup/topup')
	}
</script>

<style scoped lang="scss">
	@import "./topupEntry.scss";
</style>